<template>
  <div>
    <!--      搜索框-->
    <div style="min-height: 100px;margin:0 10px; padding:10px 10px;background: white" class="search-div">
      <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form"
              :model="searchFormState" @finish="searchDataSource">
        <!--                搜索框-->
        <a-row :gutter="24">
          <template v-for="(searchColumnItem,index) in RepairAddSearchColumns" :key="index">
            <a-col v-show="searchExpand || index <= 5" :span="4">
              <a-form-item v-if="searchColumnItem.inputType=='input'"
                           :name="searchColumnItem.name"
                           :label="searchColumnItem.label"
                           :rules="[{ required: false }]"
              >
                <a-input v-model:value="searchFormState[searchColumnItem.name]" :placeholder="searchColumnItem.placeHolder || '请输出值'"></a-input>
              </a-form-item>
            </a-col>
          </template>
        </a-row>
        <!--               -->
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" html-type="submit">搜索</a-button>
            <a-button style="margin: 0 8px" @click="() => searchFormRef.resetFields()">重置</a-button>
          </a-col>
        </a-row>

      </a-form>
    </div>
    <!--      表单-->
    <div class="form-div" style="margin:10px;padding:5px;background: white;">
      <!--              操作按钮-->
      <div class="button-div">
        <a-button type="primary" style="margin:0 10px" @click="showAddModal">
          新增
        </a-button>
      </div>
      <!--          表单区域-->
      <a-table   v-model:dataSource="tableDataSource" :columns="AddTableColumns" v-model:pagination="pagination">
      </a-table>
    </div>
  </div>
  <!-- 新增表单区域 -->
  <equipment-repair-add-model v-model:formState="formState" v-model:formFields="formFields" v-model:openModel="openModel"/>

</template>
<script setup lang="ts">
import {AddTableColumns, RepairAddSearchColumns} from "./equipmentRepairAdd.data";
import {onMounted, reactive, ref} from "vue";
import type {FormInstance} from "ant-design-vue";
import {list} from "./equipmentRepairAdd.api";
import {formFields} from "./equipmentRepairAdd.data";
import EquipmentRepairAddModel from "./equipmentRepairAddModel.vue";

// 搜索框收起
const searchExpand = ref(false);
//表单数据
const tableDataSource = reactive([])
//保存搜索的信息
const searchFormState = reactive({});
//重置效果
const searchFormRef = ref<FormInstance>()
const formState=reactive({})
// 分页配置
const pagination=reactive( {
  pageSize: 10, // 每页显示的条数
  showSizeChanger: true, // 是否可以改变每页显示的条数
  pageSizeOptions: ['10', '20', '30', '40'], // 可选的每页显示条数
  showQuickJumper: true, // 是否可以快速跳转到指定页
  showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
  current: 1, // 当前页数
  total:0, // 总条数
  onChange: null // 页码改变时的回调函数,稍后才将器填充进来
})
//新增表单
const openModel = ref(false);
/**
 * 更新表单函数
 * @param param
 */
const reloadForm=async ()=>{
  const {code,message,data} =  await list(searchFormState,{pageNo:pagination.current,pageSize:pagination.pageSize});
  console.log(data)
  if(data!=null){
    const {records,current,total}= data
    //更新页面数据
    const totalPages = total/pagination.pageSize+1
    if(totalPages<current){
      pagination.current = 1
      await  reloadForm()
      return //阻止执行下面代码
    }
    pagination.total=total
    // 添加新记录到响应式数组
    tableDataSource.length=0
    records.forEach(record => {
      tableDataSource.push(record);
    });

  }
}
/**
 * 更换页码信息的时候显示
 * @param page
 * @param pageSize
 */
const handlePageChang=(page, pageSize)=>{//参数为改变后的页码和页码数量
  pagination.current=page
  pagination.pageSize=pageSize
  reloadForm()
}
/**
 * 进来数据加载
 */
onMounted(async () => {
  pagination.onChange=handlePageChang
  await reloadForm();

})
const searchDataSource = (values: any) => {
  reloadForm()
};

function showAddModal(){
  openModel.value = true;
}
</script>